<template>
    <div>
        <el-card class="card">
            <template #header>
                <div class="section-title">
                    上报信息
                </div>
            </template>
            <div class="form">
                <el-form ref="dwxxForm" label-width="200" :model="form" :rules="rules">
                    <el-form-item label="单位名称" prop="name">
                        <el-input v-model="form.name" disabled style="width: 400px;" />
                    </el-form-item>
                    <el-form-item label="统一社会信用代码" prop="organizationCode">
                        <el-input v-model="form.organizationCode" disabled style="width: 400px;" />
                    </el-form-item>
                    <el-form-item label="单位性质" prop="nature">
                        <el-select v-model="form.nature" disabled placeholder="请选择" style="width: 400px">
                            <el-option v-for="item in xzList" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="详细地址" prop="address">
                        <el-input v-model="form.address" disabled style="width: 400px;" />
                    </el-form-item>
                    <el-form-item label="数据状态" prop="address">
                        <el-input :value="form.reportStatus==0?'未上报':'已上报'" disabled style="width: 400px;" />
                    </el-form-item>
                    <el-form-item label="办公用房信息审核文件" prop="examineFile" style="align-items: normal;">
                        <el-upload ref="uploadRef" v-model:file-list="fileList" :action="adminUrl"
                            :on-success="uploadSuccess" :headers="headerOdj" :on-change="handleChange">
                            <el-button type="primary">选择文件</el-button>
                        </el-upload>
                    </el-form-item>
                    <el-form-item>
                        <el-button style="margin-left: 100px;" type="primary" @click="onSubmit">上报数据</el-button>
                    </el-form-item>
                </el-form>
                <div style="color: #ff3a2b;">注：将打印的PDF数据文件，报单位主要领导审核，并签字盖章后，扫描领导签字盖章页及其他页，重新制作成新的PDF文件上传至此处</div>
            </div>
        </el-card>
    </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { useUserStore } from '@/pinia/modules/user'

import {
    getDyList
} from '@/api/xitongpeizhi'
import {
    unitBaseInfo,
    unitReport
} from '@/api/unit'
import {
    getZjList
} from '@/api/xitongpeizhi'
import { ElMessage, ElMessageBox, useFormItem } from 'element-plus'
const userStore = useUserStore()
const headerOdj = ref({ token: userStore.token })
const adminUrl = ref('')
adminUrl.value = import.meta.env.VITE_BASE_PATH + '/file/upload'
defineOptions({
    name: 'Dashboard'
})
let validateImage = (rule, value, callback) => {
  if (!form.value.examineFile||fileList.value.length==0) {
    callback(new Error('请上传文件'))
  } else {
    callback()
  }
}

const rules = reactive({
  examineFile: [{ required: true, validator: validateImage, trigger: 'change' }],
})

const dwxxForm = ref(null)
const xzList = ref([])
const lbList = ref([])
const form = ref({
    name: '',
    organizationCode: '',
    leader: '',
    address: '',
    unitType: '',
    nature: '',
    dataReportStaff: '',
    contact: '',
    contactJob: '',
    examineFile:''
})

const zjList = ref([])
onMounted(() => {
    getDyList({ pageNumber: 1, pageSize: 100 }).then(res => {
        xzList.value = res.result.data.filter(item => item.type == 1)
        lbList.value = res.result.data.filter(item => item.type == 2)
        unitBaseInfo().then(res => {
            form.value = res.result
            form.value.unitId = form.value.id
        })
    })
    getZjList({ pageNumber: 1, pageSize: 100 }).then(res => {
        zjList.value = res.result.data
    })
})
const onSubmit = () => {
    dwxxForm.value.validate(async (valid) => {
        if (valid) {
            let res = await unitReport(form.value)
            if (res.code == 200) {
                ElMessage({
                    type: 'success',
                    message: '上报成功!'
                })
            }
        }
    })
}

const fileList = ref([])
const handleRemove = (file) => {
  fileList.value = []
  form.value.ico = ''
}

const uploadSuccess = async (res) => {
  if (res.code != 200) {
    ElMessage({
      type: 'warning',
      message: res.message
    })
    fileList.value.pop()
    return
  }
  form.value.examineFile = res.result
  dwxxForm.value.validateField('examineFile')
}
</script>

<style lang="scss" scoped>
.section-title {
    font-weight: bold;
    font-size: 18px;
    line-height: 33px;
    padding-left: 14px;
    color: #4E7DF7;
    position: relative;
}

.section-title:before {
    content: '';
    position: absolute;
    top: 10px;
    left: 0;
    width: 6px;
    height: 14px;
    border-radius: 3px;
    background: #4E7DF7;
}
</style>